Avec la sortie de la touche unique de Mac par électron, la prise en charge de cette fonctionnalité et dans cette
nouvelle section du cours couvrira la touche électronique par API.
Examen de diverses options de mise en page et interactions.
Maintenant, la première chose à faire est de pouvoir tester cela.
Tout le monde n'aura pas accès à un Mac avec une barre tactile et bien sûr, étant un morceau de matériel, je ne
peux pas vous montrer la vraie chose.
Donc, pour démontrer la barre tactile, je vais l'utiliser sur le simulateur d'écran sur la touche principale par la documentation.
Nous avons le simulateur lié ici.
J'ai également ajouté le lien vers cette page de projet dans les ressources de la leçon.
Si vous avez une barre tactile sur votre Mac, n'hésitez pas à l'utiliser.
Soyez également assuré que ce simulateur utilise Mac OS en tant que touche native par API, donc ce que vous voyez ici est ce
que vous obtiendrez dans votre application, comme nous pouvons le voir lorsque j'affiche un éditeur de texte, le simulateur de barre tactile
change immédiatement le contexte pour le nouveau focus l'application avec des suggestions automatiques étant la principale caractéristique du tactile à
ce jour.
De même, lorsque je ferme cette fenêtre, cela permet des options rapides d'enregistrement ou de suppression.
Bon alors avec ma touche à la fois visible et prête commençons par créer une nouvelle touche par exemple pour
notre application de retour sur la touche principale par la documentation.
Notez qu'électron répertorie désormais ce module comme expérimental.
Il n'en avait jamais l'habitude.
Cela dit, le toucher par API existe depuis la version 4 de l'électron et est constamment
travaillé.
Donc, quelque chose que j'utilise définitivement dans une application de production mérite d'être pris en compte.
D'accord.
Ce module principal de barre tactile est alors ce que nous utiliserons pour créer une touche par
exemple avec tous ses sous-modules cette année étant les composants avec lesquels nous pouvons sentir une telle barre tactile sur l'application
de projet.
Je commencerai par exiger la barre tactile du module de la barre tactile principale de l'électron, puis immédiatement après la déclaration de
la référence de la fenêtre principale.
Créez cette nouvelle barre tactile en attribuant à la barre tactile une nouvelle barre tactile où le constructeur prend un objet
avec deux options possibles.
Le premier étant les articles.
Il s'agit simplement d'un tableau de composants de la barre tactile créés à partir des sous-modules de la barre tactile et
d'autre part de l'élément d'échappement.
Il s'agit d'un seul composant de la barre tactile pour remplacer la touche d'échappement de la barre tactile.
Celui-ci est facultatif, donc je vais le laisser de côté.
Cela signifie garder la touche d'échappement par défaut.
D'accord, nous pouvons ajouter des composants à cette nouvelle touche en les ajoutant ici dans l'ordre dans lequel ils apparaîtront.
Retour à la documentation, nous avons tous ces composants ici.
Alors choisissez-en un simple comme le premier à dire une étiquette.
Cette touche par étiquette avec la seule option que nous devons définir.
Étant le texte de l'étiquette, j'attribuerai ce composant à
un nouveau concept TB d'étiquette variable ou toucher par étiquette équivaut à une nouvelle barre tactile tactile par étiquette.
Donc, accéder au module Sub étiquette directement à partir du module principal de la barre tactile avec à nouveau
un objet options, puis la seule option sera définie pour aucune étiquette comme mon étiquette et ajoutera ce nouveau composant d'étiquette aux éléments de
la barre tactile.
Nous avons maintenant une barre tactile et dans cette barre tactile, nous avons un composant cette étiquette, mais nous
devons toujours l'attribuer comme barre tactile principale de notre application.
Cela doit être fait une fois l'application prête.
Donc, dans la fenêtre de création à nouveau après le chargement de la barre tactile du jeu de contenu de la fenêtre principale sur Mac, Mac est le terme
important ici.
N'oubliez pas que la barre tactile n'est disponible que sur Mac.Ainsi, en utilisant une condition de plate-forme, assurez-vous que l'application
fonctionne en fait sur Mac.
Si la plate-forme de points de processus est égale à l'appel de Darwin sur la barre tactile de l'ensemble de fenêtres principale passant à la barre tactile que nous avons créée ici,
la barre tactile est spécifique à une fenêtre et non à une application qui est donc nos testeurs et nous obtenons
cette étiquette comme premier composant avec les éléments d'échappement standard toujours là car nous ne
l'avons pas remplacé.
Cette étiquette ne fait bien sûr rien alors essayons un autre composant commun, le bouton de la barre
tactile, celui-ci ayant quelques options supplémentaires.
Je vais créer à nouveau ce bouton tactile
sur un nouveau bouton de réglage variable de 2 To à partir du module principal de la barre tactile.
Un nouveau bouton de la barre tactile définit l'étiquette du bouton mon bouton et une couleur de bouton avec la couleur d'arrière-plan.
Cela prend une clé hexagonale que j'ai copiée pour le bleu électrique.
Ajout du composant bouton à la barre tactile principale après l'enregistrement de l'étiquette et là un simple bouton avec l'étiquette spécifiée
qui ne fait rien pour le moment.
Voyons donc comment vraiment personnaliser cela et lui assigner une logique de clic.
Je vais assigner ce bouton.
Le travail d'ouverture des outils de développement lui donne donc une icône appropriée remplaçant la couleur d'arrière-plan par une icône.
Vous pouvez bien sûr utiliser une icône avec un arrière-plan coloré, mais je m'en tiendrai au bouton noir par
défaut avec une icône blanche.
Cette option d'icône prend une chaîne dans le fichier d'icône qui est ensuite convertie en un objet d'image natif, ce qui signifie
que pour toute image native, nous pouvons utiliser les conventions de dénomination des images rétiniennes.
Si vous n'êtes pas familier avec nous, je vous suggère de regarder la leçon sur les modules d'images natives.
J'y ajouterai mon icône au projet qui est un simple PMG blanc de 30 par 40 pixels.
Cependant, avoir un 2 x à la fin du nom de fichier.
Cela sera bien sûr rendu en 15 par 20 pixels sur les écrans rétine ou la moitié de sa taille réelle 20 pixels étant
la limite de hauteur pour une icône bien placée dans une barre tactile.
Définissez ce chemin sur les options d'icône en utilisant un nom de répertoire littéral de modèle dans le code de fichier
de barre oblique du répertoire du projet à 2 x point PMG et par défaut, les icônes sont définies en superposition ou centrées.
Pas bon quand on a aussi une étiquette, alors placez plutôt la position de l'icône à gauche, je vais aussi faire cette
étiquette.
Les outils Def vérifient cela avant d'ajouter le gestionnaire de clic et il y a un bouton de barre tactile noir standard avec
cette icône def blanche à gauche et l'étiquette à côté.
Nous pouvons maintenant raccorder ce bouton.
Je supprimerai l'appel pour ouvrir les outils de développement de ce paramètre de fonction de création de fenêtre au
clic du bouton tactile Bob.
Cela prend un rappel dans lequel nous pouvons appeler la même fonction d'outils de développement ouverts sur le contenu Web
principal de Windows.
N'oubliez pas que le toucher n'est défini qu'après la création de la fenêtre principale.
C'est donc parfaitement sûr à faire.
En toute sécurité pour tester à nouveau cette fois-ci, nous n'obtenons pas la fenêtre des outils de développement car à partir de la fonction
de création de fenêtre, cliquez sur le bouton des outils de développement sur la barre tactile et elle est ouverte.
Donc vraiment simple mais un extra très pratique pour les utilisateurs de Mac.
La dernière chose que je veux montrer dans cette première touche par la leçon est ensuite les espaces.
Si vous avez déjà personnalisé une barre d'outils dans n'importe quelle application, vous saurez probablement comment cela fonctionne.
Par exemple, pour créer une séparation entre ces composants, nous pouvons ajouter un petit composant d'espace grand
ou flexible.
De retour dans la documentation, nous avons cette touche par l'espace un sous-module vaut.
Comme mentionné, une option de taille peut être petite.
De plus, par défaut, grand ou flexible, je vais créer un nouveau paramètre d'espacement sur
TB spacer, un nouvel espaceur de barre tactile du module de barre tactile sans taille pour l'instant, donc par défaut trop petit
et j'ajouterai cet espaceur entre l'étiquette et le bouton.
Enregistrez-y.
Ces deux composants ne sont plus assis l'un contre l'autre, mais plutôt avec
un petit espace entre eux, une grande entretoise étant alors deux fois plus grande et peu utilisée mais une entretoise flexible l'est.
Voyons donc qu'une entretoise flexible prend autant de place que possible.
En tenant compte d'autres composants, je changerai cela pour avoir un paramètre d'option de taille qui enregistre de manière flexible
et comme prévu, le bouton des outils de développement est maintenant complètement à droite avec l'entretoise prenant tout ce
qu'il peut.
Entre l'étiquette et le bouton dans la leçon suivante, nous verrons des composants tactiles légèrement
plus avancés.